/**
 * [站点设置]列表首页[JS]
 * @returns {*}
 */
var app = function () {

    var appInstance = this;
    return new Vue({
        el: '#vueContainer',
        data: {
            loadOver: false,
            settingOver: false,
            listOver: false, // 列表加载完毕
            setting: {
                pageType: 'index', // 页面类型
                smallScreenWidth: 998, // 小屏幕临界点(px)
                isSmallScreen: false, // 是否是小屏幕
            },
            dataList: [], // 字段列表
            formBak: {}, // 备份
            form: {}, // 字段
            formRules: {}, // 字段验证规则
            customErrMsg: {}, // 自定义错误列表
            activeGroup: null, // 默认分组
            codeEditor: null, // 代码编辑器 - 实体
            editors: {}, // 文本编辑器 - 实体列表
            givenHtmlDia: false, // 文本编辑器 - 是否展示赋值窗口
            handleEKey: null, // 操作中编辑器键
            scenario: 'setting', // 图片上传 - 场景设置
            pageDialog: {
                show: false,    // 页面 - 是否展示弹出层
                url: '',        // 页面 - 弹出层连接
                loading: false, // 页面 - 弹出层加载中
                isIframe: false // 页面 - 是否[iframe]嵌入
            },
            preFormItemIsImg: false, // 上一个[form item]是图片
        },
        created: function () {
            // 初始化
            this.init();
            // 初始化下设置
            this.getSetting();
            var that = this;
            this.$nextTick(function () {
                that.loadOver = true;
                that.initMainScroll();
            });
        },
        methods: {
            /**
             * 初始化的逻辑
             */
            init: function () {

                var params = $w.getParams();
                // 是否[iframe]嵌入
                this.pageDialog.isIframe = window.self !== window.top;

                var that = this;
                // [嵌入]返回事件监听 直接走自己的返回
                if (this.pageDialog.isIframe) {
                    window.addEventListener("popstate", function ($event) {
                        if (that.cancel) that.cancel(); // 返回上一页
                        window.history.forward(-1);     // 清理此页历史记录
                    }, false);
                    window.history.pushState({
                        title: "title", url: "#"
                    }, "title", "#");
                    window.history.forward(1);
                }
            },
            /**
             * 初始化滚动条
             */
            initMainScroll: function () {
                var shadowDom = this.$refs['mainScrollShadow'];
                if (!shadowDom) return false;
                this.$refs.mainScroller.wrap.onscroll = function ($event) {
                    var opacity = 0;
                    opacity = $event['srcElement']['scrollTop'] / 100;
                    opacity = opacity > 0.6 ? 0.6 : opacity
                    shadowDom['$el']['style']['box-shadow'] = '0 5px 15px 0 rgb(204, 204, 204, ' + opacity + ')';
                };
            },
            /**
             * 获取设置
             * @returns {boolean}
             */
            getSetting: function () {
                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('setting.setting'),
                    type: 'get',
                    data: {
                        type: 'index' // 首页
                    },
                    dataType: 'json',
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 设置加载完毕
                            that.settingOver = true;
                            // 隐藏正在加载
                            loadingInstance.close();
                            // 获取下列表
                            that.getList();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 挨个赋值[setting]中
                        var type = '';
                        for (var i in event.data) {
                            if (!event.data.hasOwnProperty(i)) continue;
                            that.$set(that.setting, i, event.data[i]);

                            // 字段值类型
                            type = typeof event.data[i] !== 'object' ?
                                typeof event.data[i] : typeof $w.array_first(event.data[i]);
                            // 改变键值
                            if (i.indexOf('_list') !== -1 && type === 'object') {
                                that.setting[i] = $w.array_index(event.data[i], 'key');
                            }

                            // 默认值
                            if (i.indexOf('default_') !== -1 && that.setting.isCreate) {
                                that.form[i.replace('default_', '')] = that.setting[i];
                            }
                        }

                        // 默认分组赋值
                        that.activeGroup = +that.setting.default_group;

                        // 监测屏幕大小变化
                        return $(window).resize(function () {
                            // 超过此宽度展示 更多筛选
                            var bodyDom = document.getElementsByTagName('body');
                            if (bodyDom[0] &&
                                bodyDom[0].clientWidth <= that.setting.smallScreenWidth
                            ) {
                                return that.setting.isSmallScreen = true;
                            }
                            return that.setting.isSmallScreen = false;
                        }).resize();
                    }
                });
            },
            /**
             * 获取下列表
             */
            getList: function () {

                // 正在加载...
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '加载中...',
                    customClass: 'z-index-top'
                });
                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('setting.groupList'),
                    type: 'get',
                    data: {
                        page: this.page,
                        pageSize: 200,
                        search: {status: this.setting.status_list.open.value}
                    },
                    dataType: "json",
                    afterCallback: function () {
                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 数据 - 基础数据
                        var item, preIsImg = false;
                        for (var i in event.data.list) {
                            if (!event.data.list.hasOwnProperty(i)) continue;
                            for (var x in event.data.list[i]['settings']) {
                                if (!event.data.list[i]['settings'].hasOwnProperty(x)) continue;
                                // 条目
                                item = event.data.list[i]['settings'][x];
                                // --- 图片类型
                                // 是否小间隔样式
                                item['small_space'] = 0;
                                if (+item.type === +that.setting.type_list.image.value) {
                                    // 添加[upload]
                                    event.data.list[i]['settings'][x]['uploadStatus'] = false;
                                    // 是否小间隔样式
                                    item['small_space'] = preIsImg ? 1 : 0;
                                    preIsImg = true;
                                } else {
                                    preIsImg = false; // 上一个条目默认为
                                }
                            }

                            // 以[KEY]为键值
                            event.data.list[i]['settings'] = $w.array_index(
                                event.data.list[i]['settings'], 'key'
                            );
                        }
                        // 赋值
                        that.$set(that, 'dataList', event.data.list);

                        // 取出设置列表
                        var stageList = $w.array_column(
                            $w.dataNoBind(that.dataList), 'settings', true
                        );
                        // 循环出form表单
                        var isRequiredVal = that.setting.is_required_list.yes.value,
                            itemRules = [];
                        for (i in stageList) {
                            if (!stageList.hasOwnProperty(i)) continue;
                            item = stageList[i];
                            itemRules = [];
                            // [Form]值
                            that.$set(that.form, item['key'], item['value']);
                            // 需要必填添加规则 - 不能为空
                            if (parseInt(item['is_required']) === parseInt(isRequiredVal)) {
                                itemRules.push({
                                    required: true, message: '请完善' + item['title'] + '设置',
                                    trigger: 'blur'
                                });
                            }
                            // 需要必填添加规则 - 验证正则
                            if (!$w.isEmpty(item['reg'])) {
                                itemRules.push({
                                    validator: appInstance.formRuleForReg, trigger: 'blur', reg: item['reg'],
                                    hint: item['hint'], title: item['title']
                                });
                            }
                            // 验证赋值
                            if (!$w.isEmpty(itemRules)) {
                                that.$set(that.formRules, item['key'], itemRules);
                            }
                        }
                        // 列表加载完毕
                        that.listOver = true;
                        // 再拿出一份，做备份
                        that.formBak = $w.dataNoBind(that.form);
                    }
                });
            },
            /**
             * 返回字段类型
             * @returns {string}
             */
            getFieldType: function ($type) {

                if (!this.settingOver) return 'text';
                // 添加条目类型
                var addRows = this.setting.value_need_opt_list;
                if ($w.in_array($type, addRows)) return 'addRow';
                // 文本编辑器类型
                if ($type === this.setting.type_list.html.value) return 'html';
                // 图片形势
                if ($type === this.setting.type_list.image.value) return 'image';

                // 其他返回文本
                return 'text';
            },
            /**
             * 获取[form item container]class
             * @param $type
             * @param $item
             * @returns {string}
             */
            getFormItemContainerClass: function ($type, $item) {
                var classContent = [];
                // 上一个条目为图片
                if ($item.small_space === 1) {
                    classContent.push('small-space');
                }
                // image字段返回样式
                if (this.getFieldType($type) === 'image') {
                    classContent.push('image-form-item');
                }

                return classContent.join(' ');
            },
            /**
             * 获取[form item]class
             * @param $type
             * @returns {string}
             */
            getFormItemClass: function ($type) {
                var classContent = [];
                // JSON字段返回样式
                if (this.getFieldType($type) === 'addRow') {
                    classContent.push('el-form-item-full');
                }
                return classContent.join(' ');
            },
            /**
             * 获取[JSON]字段值列表中[class]
             * @param $item
             * @param $index
             * @returns {string}
             */
            getJsonClass: function ($item, $index) {
                var classStr = [];
                // 保证第一个有边框
                if ((($index + 1) % 4) === 0 || ($index + 1) === 1) {
                    classStr.push('border-left');
                }
                // 保证第三个没右侧边框
                if ($item.can_add_row + '' === this.setting.can_add_row_list.yes.value + '' &&
                    ($index + 1) % 3 === 0
                ) {
                    classStr.push('no-border-right');
                }
                // 展示添加按钮
                var keyLength = Object.keys($item.value).length;
                if (keyLength === ($index + 1) && ($index + 1) % 3 === 0) {
                    classStr.push('no-border-right');
                }
                return classStr.join(' ');
            },
            /**
             * [JSON类型]是否展示添加按钮组件
             * @param $item
             * @param $index
             */
            showJsonAddBtn: function ($item, $index) {

                var keyLength = Object.keys($item.value).length;
                return keyLength === ($index + 1) && ($index + 1) % 3 === 0;
            },
            /**
             * 保存操作
             */
            submitSave: function () {

                // 强制关闭下全部弹出层
                this.$message.closeAll();
                // 清空错误信息
                this.$refs['ruleForm'].clearValidate();

                // ## 验证之前需要值转换 ##
                // 取出列表
                var stageList = $w.array_column(
                    $w.dataNoBind(this.dataList), 'settings', true
                ), endValues = {};

                for (var i in stageList) {
                    if (!stageList.hasOwnProperty(i)) continue;
                    // 如果是[编辑器]类型 - 取出值
                    if ($w.isEqual(stageList[i]['type'], this.setting.type_list.html.value)) {
                        this.form[i] = this.$refs['html_editor' + i][0].getEditorHtml();
                    }

                    // 比较值变化相同过滤掉
                    if ($w.isEqual(this.form[i], this.formBak[i])) continue;

                    // 赋值
                    endValues[i] = this.form[i];
                }
                // 检测如果都相同则直接成功
                if ($w.isEmpty(endValues)) {
                    return this.$message({
                        type: 'success',
                        showClose: true,
                        message: '无需更新'
                    });
                }

                var that = this;
                this.$refs['ruleForm'].validate(function (valid, msg) {

                    // 验证不过 - 滚动到错误字段
                    if (!valid) {

                        var first = $w.array_first_key(msg);
                        // 分组
                        if (stageList[first] && stageList[first]['group'])
                            that.activeGroup = +stageList[first]['group'];
                        // 滚动条
                        $w.scrollToFormItem('scroll_' + stageList[first]['group'], first);
                        return false;
                    }

                    // 正在加载。。
                    var loadingInstance = ELEMENT.Loading.service({
                        fullscreen: false,
                        text: '保存中...',
                        customClass: 'z-index-top'
                    });

                    $w.request({
                        url: $w.getApiUrl('setting.updatePlan'),
                        type: 'POST',
                        data: endValues,
                        dataType: "json",
                        afterCallback: function () {
                            that.$nextTick(function () {
                                // 隐藏正在加载
                                loadingInstance.close();
                            });
                        },
                        callback: function (event) {

                            // 失败的返回|提示
                            if (parseInt(event.no) !== 200) {
                                for (var i in event.data.column_error) {
                                    if (!event.data.column_error.hasOwnProperty(i))
                                        continue;
                                    that.$set(that.customErrMsg, i, event.data.column_error[i]);
                                }
                                // ##### 滚动到错误字段 #####
                                var first = $w.array_first_key(that.customErrMsg);
                                // 分组
                                if (stageList[first] && stageList[first]['group']) {
                                    that.activeGroup = +stageList[first]['group'];
                                }
                                // 滚动条
                                $w.scrollToFormItem('scroll_' + stageList[first]['group'],
                                    first
                                );
                                return that.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: event.msg ? event.msg : '操作失败，请稍后尝试'
                                });
                            }

                            that.getList();

                            that.$message({
                                type: 'success',
                                showClose: true,
                                message: '更新成功'
                            });
                        }
                    });
                });
            },
            /**
             * 获取[JSON]栅格化每行几格
             * @param $item 字段详情
             * @param $index 第几个
             * @returns {*|string}
             */
            getJsonSpan: function ($item, $index) {

                // 选项
                var option = !$item.option ? {} : $item.option,
                    // 是否可添加 - 默认不可
                    canAddRow = $item.can_add_row === this.setting.can_add_row_list.yes.value + '',
                    // 字段选项长度
                    len = Object.keys(option).length,
                    // 栅格总数
                    total = 24 - (canAddRow ? 3 : 0)
                ;
                var span = $w.format_number(total / len, 0, 2);
                // 索引是最后一个 && 不能添加 没有具体长度
                if (parseInt($index) + 1 === len && !canAddRow) {
                    var desc = 21 - (span * len);
                    return parseInt(span) + (desc > 0 ? desc : 0);
                }
                return span;
            },
            /**
             * 添加一条键值数据
             * @param $column 字段键
             * @param $option 字段选项
             */
            addRowValue: function ($column, $option) {

                // 空的初始化数组
                if ($w.isEmpty(this.form[$column])) this.$set(this.form, $column, []);

                // 基础数据
                var key = this.form[$column].length, data = {};
                for (var i in $option) {
                    if (!$option.hasOwnProperty(i)) continue;
                    data[$option[i]['key']] = '';
                }
                this.$set(this.form[$column], key, data);
            },
            /**
             * 删除一条键值数据
             * @param $key
             * @param $column
             */
            delRowValue: function ($key, $column) {

                var that = this;
                this.$confirm('此操作将[删除]此条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {

                    that.$delete(that.form[$column], $key);
                });
            },
            /**
             * 去列表
             */
            goToList: function () {
                // 正在加载。。
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '跳转中...',
                    customClass: 'z-index-top'
                });

                var that = this;
                setTimeout(function () {
                    loadingInstance.close();
                }, 1500);

                window.location.href = $w.getPageUrl('setting.list');
            },
            /**
             * 去首页
             */
            goToIndex: function () {
                // 父级
                var parent = window.parent.top;
                if (!parent) return false;

                // 父级[vue]对象
                var vueInstance = parent.instance;
                if (!parent || !(typeof vueInstance === 'object')) return false;

                // 键值
                var key = vueInstance.tab.indexKey;
                // 操作点击
                $(parent.document).find('#tab-' + key).click();
            },
            /**
             * Form表单msg是否和对象在一行
             * @param $type
             * @returns {boolean}
             */
            formInlineMsg: function ($type) {
                return this.getFieldType($type) !== 'addRow';
            },
            /**
             * 替换说明文本内容
             * @param $content
             */
            formatDesc: function ($content) {
                $content = $content.replace(/\\n/g, "<br>");
                $content = $content.replace(/\\r/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
                return $content;
            },
            /**
             * 获取条目固定样式
             * @param $item
             */
            getItemStyle: function ($item) {
                var styles = [];
                if (!$w.isEmpty($item.width)) {
                    styles.push('width: ' + $item.width);
                }
                return styles.join('; ');
            }
        },
        watch: {}
    });
};
app.prototype = {
    /**
     * 检查FORM表单[Value]值
     * @param $rule
     * @param $value
     * @param $callback
     */
    formRuleForReg: function ($rule, $value, $callback) {

        // 正则 - 空不验证
        if ($w.isEmpty($rule.reg) || $w.isEmpty($rule.field)) {
            return $callback();
        }

        // 暂存正则
        var reg = $w.dataNoBind($rule.reg), hint = $w.dataNoBind($rule.hint);
        // 需要去掉第一个/
        if (reg.substr(0, 1) === '/') {
            reg = reg.substr(1, reg.length);
        }
        // 需要去掉最后一个/
        if (reg.substr(reg.length - 1, reg.length) === '/') {
            reg = reg.substr(0, reg.length - 1);
        }
        reg = new RegExp(reg);
        var vueInstance = window.instance;
        // 如果提示没有字段名称 - 添加上
        if (hint.indexOf($rule.title) === -1) {
            hint = $rule.title + hint;
        }
        // 验证不过
        if (!reg.test($value)) {
            vueInstance.$message({
                type: 'error',
                showClose: true,
                message: hint
            });
            return $callback(new Error($rule.hint));
        }

        return $callback();
    }
};